<template>
	<view class="container">
		<form @submit="formSubmit" @reset="formReset">
			<view class="form-box">
				<view class="row-wrap">
					<view class="label">手机号码</view>
					<view class="label-right">
						<input name="mobile" class="input" maxlength="11" type="number" placeholder="将通过此手机号联系您"
							:value="addressData.receiver_mobile" />
					</view>
				</view>
				<view class="row-wrap">
					<view class="label">联系人</view>
					<view class="label-right">
						<input name="receiver" class="input" type="text" placeholder="姓名"
							:value="addressData.receiver_name" />
					</view>
				</view>

				<view class="row-wrap">
					<view class="label">省份</view>
					<view class="label-right">
						<input name="province" class="input" type="text" placeholder="省份"
							:value="addressData.receiver_province" />
					</view>
				</view>

				<view class="row-wrap">
					<view class="label">市</view>
					<view class="label-right">
						<input name="city" class="input" type="text" placeholder="市" :value="addressData.receiver_city" />
					</view>
				</view>

				<view class="row-wrap">
					<view class="label">地区</view>
					<view class="label-right">
						<input name="area" class="input" type="text" placeholder="地区" :value="addressData.receiver_district" />
					</view>
				</view>

				<view class="row-wrap">
					<view class="label">地址</view>
					<view class="label-right">
						<input name="address" class="input" type="text" placeholder="地址" :value="addressData.receiver_address" />
					</view>
				</view>

			</view>
			<button type="warn" class="save-btn" form-type="submit">保存</button>
			<button type="default" class="save-btn" @click="deleteAddress" wx:if="addressData">删除该地址</button>
			<button type="default" class="cancel-btn" @click="onCancelClick">取消</button>
		</form>
	</view>
</template>

<script>
	import {
		Celebrity
	} from '@/models/celebrity.js'
	const celebrityModel = new Celebrity()
	export default {
		data() {
			return {
				addressData: {},
				savestatus: 'add',
				addressId: 0,
				celebrityId: uni.getStorageSync('celebrity_id')
			}
		},
		methods: {
			onCancelClick() {
				uni.navigateBack({})
			},
			formSubmit(e) {
				let that = this;
				let receiver = e.detail.value.receiver
				let mobile = e.detail.value.mobile
				let province = e.detail.value.province
				let city = e.detail.value.city
				let area = e.detail.value.area
				let address = e.detail.value.address

				if (receiver == "") {
					uni.showModal({
						title: '提示',
						content: '请填写联系人姓名',
						showCancel: false
					})
					return
				}
				if (mobile == "") {
					uni.showModal({
						title: '提示',
						content: '请填写手机号码',
						showCancel: false
					})
					return
				}

				if (address == "") {
					uni.showModal({
						title: '提示',
						content: '请填写地址',
						showCancel: false
					})
					return
				}
				let submitData = {}
				submitData.receiver_name = receiver
				submitData.receiver_mobile = mobile
				submitData.receiver_province = province
				submitData.receiver_city = city
				submitData.receiver_district = area
				submitData.receiver_address = address
				let savestatus = this.savestatus
				uni.showLoading({
					title: '提交中',
				})
				if (savestatus == 'edit') {
					celebrityModel.updateAddress(this.celebrityId, this.addressId, submitData, (res)=>{
						uni.hideLoading();
						uni.navigateBack({})
					})
				}else{
					celebrityModel.createAddress(this.celebrityId, submitData, (res)=>{
						uni.hideLoading();
						uni.navigateBack({})
					})
				}	
			},
			deleteAddress() {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定要删除该收货地址吗？',
					success: function(res) {
						uni.showLoading({
							title: '提交中',
						})
						celebrityModel.deleteAddress(this.addressId, (data) => {
							if (data.code == 0) {
								uni.showToast({
									title: res.msg
								})
								uni.hideLoading();
								uni.navigateBack({})
							} else {
								uni.showToast({
									title: res.msg
								})
								uni.hideLoading()
								return
							}
						})
					}
				})
			}
		},
		onLoad(options) {
			if (options.id) {
				let address = uni.getStorageSync('edit_address')
				this.addressData = address
				this.addressId = options.id
				this.savestatus = 'edit'
			}
		}
	}
</script>

<style>
	page {
		height: 100%;
	}

	.container {
		background-color: #f5f5f9;
		justify-content: initial;
	}

	.form-box {
		width: 100%;
		background-color: #fff;
		margin-top: 20rpx;
	}

	.row-wrap {
		width: 720rpx;
		height: 88rpx;
		line-height: 88rpx;
		margin-left: 30rpx;
		border-bottom: 1rpx solid #eee;
		display: flex;
		font-size: 28rpx;
	}

	.address {
		width: 720rpx !important;
		margin-left: 30rpx !important;
	}

	.right-section {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-left: -570rpx;
	}

	.right-section text {
		margin-left: 20rpx;
	}

	.row-wrap .label {
		width: 160rpx;
		color: #000;
	}

	.row-wrap .label-right {
		flex: 1;
		height: 88rpx;
		line-height: 88rpx;
	}

	.row-wrap .label-right input {
		height: 100%;
		font-size: 28rpx;
		padding-right: 30rpx;
	}

	.row-wrap .right-box {
		margin-right: 30rpx;
	}

	.arrow-right {
		width: 15rpx;
		height: 24rpx;
	}

	.choose-address {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		font-size: 24rpx;
	}

	.has-address-text {
		color: #333;
	}

	.choose-address-text {
		color: #999;
	}

	.icon {
		margin-right: 20rpx;
	}
</style>